<template>
  <div style="position: absolute;width: 100%;height: 100%;overflow: auto;display: flex;align-items: center;">
    <div class="install-container">
      <h1>系统初始化</h1>
      <div style="width: 100%;padding: 10px">
        <Form :model="initForm" ref="formRef" :rules="{}" :labelWidth="110"  showErrorTip>
          <FormItem label="配置类型" prop="installType" required>
            <div class="h-input-group">
              <Radio v-model="initForm.installType" :datas="[{key:1,title:'初始化数据库'},{key:2,title:'仅配置连接'}]"></Radio>
              <span v-if="initForm.installType===1" class="h-memo">建立表并初始化表中的数据。</span>
              <span v-else class="h-memo">仅配置连接，保留数据库中原有数据。</span>
            </div>
          </FormItem>

          <FormItem label="JDBC驱动">
            <div class="h-input-group">
              <Select v-model="initForm.driver" :datas="drivers" :deletable="false" @change="onDriverChange"></Select>
              <span class="h-memo">目前仅支持部分数据库驱动</span>
            </div>
          </FormItem>
          <FormItem label="JDBCUrl" v-if="initForm.driver=='org.h2.Driver'" required>
            <div class="h-input-group">
              <Input v-model="initForm.jdbcUrl"/> <span class="h-memo">数据库链接url,需要Mysql兼容模式</span>
            </div>
          </FormItem>
          <template v-else>
            <FormItem label="服务器地址" prop="ip" required>
              <div class="h-input-group">
                <Input v-model="initForm.ip"/> <span class="h-memo">数据库服务器域名或IP地址</span>
              </div>
            </FormItem>
            <FormItem label="服务器端口" prop="port" required>
              <div class="h-input-group">
                <Input v-model="initForm.port" /> <span class="h-memo">访问数据库使用的端口</span>
              </div>
            </FormItem>
            <FormItem label="数据库名称" prop="dbName" required>
              <div class="h-input-group">
                <Input v-model="initForm.dbName" /> <span class="h-memo">若数据库不存在，则会自动创建，编码为utf8mb4。</span>
              </div>
            </FormItem>
          </template>
          <FormItem label="用户名" prop="username" required>
            <div class="h-input-group">
              <Input v-model="initForm.username" /> <span class="h-memo">访问数据库使用的用户名</span>
            </div>
          </FormItem>
          <FormItem label="密码" prop="password" required>
            <div class="h-input-group">
              <Input v-model="initForm.password" type="password" /> <span class="h-memo">访问数据库使用的密码</span>
            </div>
          </FormItem>
        </Form>
      </div>
      <Button :loading="running" color="primary" @click="doInit">开始初始化</Button>
    </div>
  </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {message,modal} from 'heyui'
const drivers=['com.mysql.jdbc.Driver','org.h2.Driver']
const initForm=reactive({
  appName:'',
  installType:1,
  ip:'127.0.0.1',
  port:'3306',
  jdbcUrl:'',
  driver:'com.mysql.jdbc.Driver',
  dbName:'easy_boot',
  username:'root',
  password:''
})
const running=ref(false)
const formRef=ref(null)

function doInit(){
  let validResult = formRef.value.valid();
  if (!validResult.result) {
    return;
  }
  running.value=true
  fetch('install/install',{
    method:"POST",
    body:JSON.stringify(initForm),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(r=>r.json()).then(r=>{
    if(r.success){
      modal({
        title:'系统初始化完成',
        content:"系统初始化完成,刷新后进入。默认超级管理员用户名密码为admin/admin。",
        buttons: [
          {
            type: 'confirm',
            name: '确认',
            style: 'primary'
          }
        ],
        events:{
          confirm(){
            location.href="./";
          }
        }
      });
    }else{
      modal({
        title:'系统初始化错误',
        content: r.message
      });
    }
  }).catch(e=>{
    console.log(e)
  }).finally(_=>{
    running.value=false
  })
}
function onDriverChange(){
  if(initForm.driver=='org.h2.Driver'&&!initForm.jdbcUrl){
    initForm.jdbcUrl='jdbc:h2:./app;AUTO_SERVER=true;MODE=MYSQL'
  }
}
</script>

<style scoped>
.install-container{
  width: 640px;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  border: solid 1px #B9CEDA;
  box-shadow: 3px 3px 6px #b9ceda;
  padding:20px;
  border-radius: 8px;
}
.h-memo{
  color: #9C9893;
  font-size: 12px;
  width: 250px;
  padding-left: 20px;
}
</style>
